<template>
	<view class="education-page">
		<!-- <view class="zhan1"></view> -->
		<view class="search-top">
			<input class="search-input iconfont" :placeholder="placeholder" placeholder-style="color:#666666;" confirm-type="search" @focus="search">
			<!-- <span class="text" @tap="back">取消</span> -->
		</view>
		<view class="type-box">
			<view class="main" @tap="open">
				<span class="name">全部课程分类</span>
				<span class="text">共{{total1}}个分类,{{total}}个课程</span>
				<span class="iconfont icongengduo1"></span>
			</view>
		</view>
		<scroll-view class="main-content" :scroll-top="scrollTop" scroll-y @scrolltolower="loadMore" @scroll="scroll">
			<view class="top">
				<span class="text">全部课程</span>
				<!-- <span class="more">查看全部 <i class="iconfont icongengduo1"></i> </span> -->
			</view>
			<view class="item" v-for="(item,index) in courseList" @tap="goPage('../course/content?id='+item.privateId)">
				<image :src="item.photo" class="img"></image>
				<view class="courseTypeLabel">{{item.courseTypeLabel}}</view>
				<view class="right">
					<span class="title">{{item.courseName}}</span>
					<p class="number">总学时: <span style="color:#1783dd;">{{item.classHours}}</span> </p>
					<span class="iconfont iconren2">{{item.studyCount}}</span>
					<view class="go">
						<!-- <span class="new"  v-if="item.courseType=='1'" >点播课程</span>
						<span  class="new" v-if="item.courseType=='10'">第三方课程</span> -->
					</view>
				</view>
			</view>
			<nodata v-show="courseList.length==0&&start"></nodata>
			<view class="end-text" v-show="start && end &&courseList.length!=0">已经到底啦...</view>
			<button class="end-text uni-icons " v-show="load" loading="true" >数据加载中...</button>
		</scroll-view>
		<uni-drawer ref="drawer" mode="right" class="drawer">
		    <scroll-view class="drawer-main" scroll-y >
		    	<!-- <view class="zhan1"></view> -->
				<view class="search-top" style="display:none;">
					<input class="search-input iconfont" :placeholder="placeholder" placeholder-style="color:#666666;" confirm-type="search" @confirm="search">
					<!-- <span class="text" @tap="back">取消</span> -->
				</view>
				<view class="type-box" @tap="close">
					<view class="main">
						<!-- <p class="name">返回 <span style="color:#1783dd;margin-left:10rpx;">继续课程首页</span></p> -->
						<p class="name"> <span style="color:#1783dd;margin-left:10rpx;">返回课程首页</span></p>
						<span class="iconfont icongengduo1"></span>
					</view>
				</view>
				<view class="type-main">
					<view class="top"> 一 课程分类 一 </view>
					<view class="type-all">
						<view class="item" v-for="(item,index) in menuList1" :class="[item.icon,item.addClass]" @tap="select1(index)">
							<span class="iconfont iconfeneli-copy" :class="item.icon"></span>
							<span class="name">{{item.treeName}}</span>
						</view>
					</view>
				</view>
				<view class="type-main" v-show="menuList2.length!=0">
					<view class="top"> 一 课程分类 一 </view>
					<view class="type-all">
						<view class="item" v-for="(item,index) in menuList2" :class="[item.icon,item.addClass]" @tap="select2(index)">
							<span class="iconfont iconfeneli-copy" :class="item.icon"></span>
							<span class="name">{{item.treeName}}</span>
						</view>
					</view>
				</view>
				<!-- <view class="type-main">
					<view class="top"> 一 收费类型 一 </view>
					<view class="type-all">
						<view class="item" v-for="(item,index) in typeList2" :class="[item.addClass]"  @tap="select3(index)">
							<span class="iconfont iconfeneli-copy" :class="item.icon"></span>
							<span class="name">{{item.title}}</span>
						</view>
					</view>
				</view> -->
				<!-- <view class="type-main">
					<view class="top"> 一 课程类型 一 </view>
					<view class="type-all">
						<view class="item" v-for="(item,index) in typeList3" :class="[item.addClass]"  @tap="select4(index)">
							<span class="iconfont iconfeneli-copy" :class="item.icon"></span>
							<span class="name">{{item.title}}</span>
						</view>
					</view>
				</view> -->
				<view class="submit" @tap="submit">确定</view>
		    </scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import nodata from '@/components/nodata.vue'
	export default {
		components: {uniDrawer,nodata},
		data() {
			return {
				scrollTop:0,
				oldscrollTop:0,
				placeholder:'\ue60c 输入内容',
				courseList:[
					
				],
				pageSize:10,
				total1:null,
				pageNo:1,
				fs:'',
	            fee:'',
	            paixu:'',
	            total:null,
	            type1:'',
	            fee:'',
	            vipType:'',
	            start:false,
				end:false,
				load:false,
	            input:'',
	            menuList1:[],
	            menuList2:[],
	            typeList1:[
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
				],
				typeList2:[
					{title:'全部',icon:'iconfeneli-copy',id:'',addClass:''},
					{title:'免费',icon:'iconfeneli-copy',id:'0',addClass:''},
					{title:'付费',icon:'iconfeneli-copy',id:'1',addClass:''},
				],
				typeList3:[
					{title:'全部课程',icon:'iconfeneli-copy',id:'',addClass:''},
					{title:'面授课程',icon:'iconfeneli-copy',id:'4',addClass:''},
					{title:'点播课程',icon:'iconfeneli-copy',id:'1',addClass:''},
				],
			}
		},
		onLoad() {
			
			//  setTimeout(function () {
			// 	console.log('start pulldown');
				
			// }, 1000);
			// uni.startPullDownRefresh();
			this.getList();
			this.getType('0');
			// this.getType('0');
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.pageNo = 1;
			this.end = false;
			this.$refs.drawer.close();
			// this.courseList = [];
			this.getList();
			// uni.hideLoading()
			this.scrollTop = this.oldscrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			});
			// setTimeout(function () {
			// 	uni.stopPullDownRefresh();
			// }, 1000);
		},
		methods: {
			scroll: function(e) {
				console.log(e)
				this.oldscrollTop = e.detail.scrollTop
			},
			loadMore(){
				if(!this.load && !this.end){
					this.load = true;
					this.pageNo = this.pageNo+1;
					setTimeout(()=>{
						this.getList();
					},1000)
				}
			},
			open(){
				this.$refs.drawer.open();
			},
			close(){
				this.$refs.drawer.close();
			},
			goPage(url){
				uni.navigateTo({
					url:url
				})
			},
			select1(index){
				this.menuList1.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active";
						this.type1 = item.id;
						//this.getList();
						this.menuList2 = [];
						if(item.id!=""){
							this.getType(item.id);
						}
						
					}
					else{
						item.addClass = "";
					}
				})
			},
			select2(index){
				this.menuList2.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active";
						this.type1 = item.id;
						
					}
					else{
						item.addClass = "";
					}
				})
			},
			select3(index){
				this.typeList2.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active";
						this.fee = item.id;
						
					}
					else{
						item.addClass = "";
					}
				})
			},
			select4(index){
				this.typeList3.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active";
						this.vipType = item.id;
						
					}
					else{
						item.addClass = "";
					}
				})
			},
			submit(){
				this.pageNo = 1;
				this.end = false;
				this.$refs.drawer.close();
				this.courseList = [];
				this.getList();
			},
			getList(){
	            let that = this;				
	            this.$http.get("/f/coursePage?classifyId="+this.type1+"&paixu="+this.paixu+"&fs="+this.fs+"&pageNo="+this.pageNo+"&pageSize="+this.pageSize+"&courseName="+this.input)
	            .then(function (response) {
	                let list = response.data.coursePage.list;
	                that.total = response.data.coursePage.count;
	                if(list.length!=0){
	                    list.forEach((item,i)=>{
	                        item = Object.assign(item,item.courseInfo)
	                        item.photo = that.$url + item.photo;
	                    })
	                }
					if(that.pageNo == 1){
						that.courseList = list;
					}
					else{
						that.courseList = that.courseList.concat(list);
					}	                
	                that.start = true;

	                if(that.courseList.length==response.data.coursePage.count){
	                	that.end = true;
	                }
	                that.load = false;
					uni.stopPullDownRefresh();
					// that.$set(that.courseList)
	            })
	            .catch(function (error) {
	                // handle error
	                console.log(error);
	            })
	        },
	        getType(id){
            
	            let that = this;
	            let obj = {
	                id:'0'
	            }
	            this.$http.get("/f/listCourseClassify?parentCode="+id)
	            .then(function (response) {
	                if(id=="0"){
	                    let obj = {
	                        treeName:'全部',
	                        id:''
	                    }
	                    let list = response.data;
	                    if(list.length!=0){
	                    	list.forEach((item,i)=>{
	                    		item.icon = "";
	                    		item.addClass = "";
	                    	})
	                    }
	                    
	                    list.unshift(obj);
	                    that.total1 = list.length;
	                    let len = list.length;
	                    if(len%3!=0){
	                    	console.log(222)
	                    	let a = 3-(len%3);
	                    	console.log(a)
	                    	for(var i=0;i<a;i++){
	                    		let obj1 = {};
	                    		obj1.icon = "noData";
	                    		list.push(obj1)
	                    	}
	                    	
	                    }

	                    that.menuList1 = list;
	                    
	                }
	                else{
	                	let list = response.data;
	                    if(list.length!=0){
	                    	list.forEach((item,i)=>{
	                    		item.icon = "";
	                    		item.addClass = "";
	                    	})
	                    }
	                    let len = list.length;
	                    if(len%3!=0){
	                    	console.log(222)
	                    	let a = 3-(len%3);
	                    	console.log(a)
	                    	for(var i=0;i<a;i++){
	                    		let obj1 = {};
	                    		obj1.icon = "noData";
	                    		list.push(obj1)
	                    	}
	                    	
	                    }
	                    that.menuList2 = list;
	                }
	                
	            })
	            .catch(function (error) {
	                // handle error
	                console.log(error);
	            })
	        },
			back(){
				uni.navigateBack({
				    delta: 2
				});
			},
			search(){
				this.goPage('courseSearch')
			},
			change(item){
				this.current = item.detail.current;
			},
			goSelect(){
				console.log(222)
			},
			select(index){
				this.active = index;
				this.list.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active"
					}
					else{
						item.addClass = ""
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.education-page{
		width:100%;
		height:100%;
		background:#f5f5f5;
		overflow:hidden;
		.drawer-main{
			width:100%;
			height:100%;
			
			.submit{
				width:550rpx;
				height:80rpx;
				line-height:80rpx;
				margin:40rpx auto;
				border-radius:10rpx;
				text-align:center;
				background:#1783dd;
				color:#fff;
				font-size:32rpx;
			}
			.type-main{
				width:100%;
				padding:0 30rpx;
				box-sizing:border-box;
				margin-bottom:40rpx;
				.top{
					width:100%;
					height:50rpx;
					line-height:50rpx;
					text-align:center;
					font-size:32rpx;
					color:#555555;

				}
				.type-all{
					width:100%;
					display:flex;
					justify-content:space-between;
					flex-wrap:wrap;
					.item{
						width:210rpx;
						background:#ffffff;
						box-shadow:0 2rpx 8rpx #d0d0d0;
						margin-top:30rpx;
						padding:30rpx 0;
						padding-bottom:20rpx;
						.iconfont{
							margin:0 auto;
							font-size:70rpx;
							color:#1783dd;
							display:block;
							width:160rpx;
							height:40rpx;
							line-height:40rpx;
							text-align:center;
						}
						.name{
							width:100%;
							display:block;
							margin-top:15rpx;
							line-height:40rpx;
							text-align:center;
							font-size:30rpx;
							color:#555555;
						}
					}
					.active{
						background:#1783dd;
						.iconfont{
							color:#fff;
						}
						.name{
							color:#fff;
						}
					}
				}
			}
			.type-box{
				width:690rpx;
				margin:30rpx auto;
				height:110rpx;
				border-radius:10rpx;
				background:#ffffff;
				box-shadow:0 2rpx 10rpx #e0e0e0;
				display:flex;
				box-sizing:border-box;
				padding:0 40rpx;
				align-items:center;
				.main{
					width:100%;
					position:relative;
					.iconfont{
						font-size:56rpx;
						position:absolute;
						font-weight:600;
						right:0;
						color:#b3b3b3;
						top:50%;
						transform:translateY(-50%);
					}
					.name{
						display:block;
						width:100%;
						line-height:40rpx;
						font-size:32rpx;
						color:#444444;
					}
					.text{
						display:block;
						width:100%;
						line-height:40rpx;
						font-size:28rpx;
						color:#888888;
						margin-top:5rpx;
					}
				}
			}
			.search-top{
				width:100%;
				padding:0 30rpx;
				height:100rpx;
				display:flex;
				justify-content:space-between;
				align-items:center;
				box-sizing:border-box;
				border-bottom:1px solid #e6e6e6;
				background:#ffffff;
				.search-input{
					width:100%;
					height:60rpx;
					border-radius:60rpx;
					background:#f4f4f4;
					box-sizing:border-box;
					padding:0 30rpx;
					font-size:28rpx;
					color:#555555;
					line-height:70rpx;
					text-align:center;
				}
				.text{
					font-size:32rpx;
					color:#1783dd;
				}
			}
		}
		.main-content{
			width:100%;
			box-sizing:border-box;
			padding:20rpx 30rpx;
			padding-bottom:30rpx;
			background:#ffffff;
			padding-bottom:0;
			margin-top:30rpx;
			height:calc(100% - 340rpx);
			overflow-y:auto;
			.course-all{
				width:100%;
				display:flex;
				justify-content:space-between;
				flex-wrap:wrap;
			}
			.course-item{
				width:330rpx;
				margin-top:30rpx;
				border-radius:10rpx;
				overflow:hidden;
				background:#ffffff;
				padding-bottom:20rpx;
				position: relative;
				.courseTypeLabel1{
					width: 100%;
					width: 260rpx;
					position: absolute;
					top: 0;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					text-align: center;
					// background: #0076CA;
					background:rgba(0,118,202,0.5) ;
					color: #FFFFFF;
				}
				.image{
					width:100%;
					height:200rpx;
				}
				.name{
					display:block;
					font-weight:600;
					line-height:40rpx;
					height:40rpx;
					width:100%;
					box-sizing:border-box;
					padding:0 15rpx;
					overflow: hidden;    
				    text-overflow:ellipsis;    
				    white-space: nowrap;
				    font-size:34rpx;
				    color:#555555;
				}
				.content{
					display:block;
					width:100%;
					line-height:40rpx;
					height:120rpx;
					box-sizing:border-box;
					padding:0 15rpx;  
				    font-size:28rpx;
				    color:#888888;
				    display: -webkit-box;    
				    -webkit-box-orient: vertical;    
				    -webkit-line-clamp: 3;    
				    overflow: hidden;
				    margin-top:5rpx;
				}
				.iconfont{
					width:100%;
					display:block;
					line-height:30rpx;
					box-sizing:border-box;
					padding:0 15rpx;
					height:30rpx;
					overflow: hidden;    
				    text-overflow:ellipsis;    
				    white-space: nowrap;
				    font-size:28rpx;
				    color:#666666;
				    margin-top:10rpx;
				}
				.iconfont:before{
					font-size:34rpx;
					margin-right:6rpx;
				}
			}
			.ind-content{
				width:100%;
				display:block;
				margin:30rpx auto;
				position:relative;
				.text{
					position:absolute;
					width:100%;
					line-height:40rpx;
					top:40rpx;
					font-size:36rpx;
					color:#fff;
					text-align:center;
					left:0;
					z-index:999;
				}
				.main-data{
					box-sizing:border-box;
					padding:0 60rpx;
					line-height:40rpx;
					font-size:30rpx;
					color:#fff;
					position:absolute;
					left:0;
					top:100rpx;
					z-index:999;
				}
			}
			.banner{
				width:100%;
				display:block;
			}
			.news-main{
				width:100%;
				.news-content{
					width:100%;
					box-sizing:border-box;
					padding-left:0rpx;
					.news-item{
						width:100%;
						border-bottom: 1px #d0d0d0 dashed;
						padding-bottom:20rpx;
						padding-top:20rpx;
						.name{
							width:95%;
							display:block;
							line-height:40rpx;
							font-size:30rpx;
							color:#555555;
							
						}
						.time{
							width:100%;
							display:block;
							line-height:40rpx;
							font-size:28rpx;
							color:#999999;
							overflow:hidden;
							margin-top:10rpx;
							text-overflow:ellipsis;
							white-space:nowrap;
						}
						.time:before{
							color:#1783dd;
							font-size:40rpx;
							margin-right:10rpx;
							position:relative;
							top:4rpx;
						}
						.iconzuozhe:before{
							font-size:36rpx;
						}
					}
					.news-item:last-child{
						border:0;
					}
				}
				.news-top{
					width:100%;
					height:70rpx;
					background:#fbdcdc;
					box-sizing:border-box;
					padding:0 40rpx;
					line-height:70rpx;
					font-size:30rpx;
					color:#d01515;
				}
				.news-top:before{
					margin-right:16rpx;
					font-size:34rpx;
				}
			}
			.item{
				width:100%;
				display:flex;
				margin-top:30rpx;
				position: relative;
				.courseTypeLabel{
					width: 260rpx;
					position: absolute;
					top: 0;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					text-align: center;
					// background: #0076CA;
					background:rgba(0,118,202,0.5) ;
					color: #FFFFFF;
				}
				.img{
					width:260rpx;
					height:180rpx;
					margin-right:30rpx;
					border-radius:10rpx;
				}
				.right{
					width:calc(100% - 290rpx);
					position:relative;
					.go{
						position:absolute;
						height:45rpx;
						text-align:center;
						border-radius:6rpx;
						font-size:28rpx;
						color:#fff;
						right:0rpx;
						bottom:0rpx;
						display:flex;
						.new{
							font-size:34rpx;
							color:#1783dd;
							line-height:40rpx;
							margin-right:10rpx;
						}
						.old{
							font-size:32rpx;
							color:#888888;
							line-height:35rpx;
							margin-top:10rpx;
							text-decoration:line-through;
						}
					}
					.title{
						width:100%;
						display:block;
						line-height:40rpx;
						height:40rpx;
						overflow: hidden;    
					    text-overflow:ellipsis;    
					    white-space: nowrap;
					    font-size:32rpx;
					    color:#444444;
					    margin-top:10rpx;
					}
					.number{
						width:100%;
						display:block;
						line-height:40rpx;
						height:40rpx;
						overflow: hidden;    
					    text-overflow:ellipsis;    
					    white-space: nowrap;
					    font-size:28rpx;
					    color:#666666;
					    margin-top:5rpx;
					    span{
					    	font-size:38rpx;
					    	margin-left:6rpx;
					    }
					}
					.iconfont{
						width:100%;
						display:block;
						line-height:30rpx;
						height:30rpx;
						overflow: hidden;    
					    text-overflow:ellipsis;    
					    white-space: nowrap;
					    font-size:28rpx;
					    color:#666666;
					    margin-top:50rpx;
					}
					.iconfont:before{
						font-size:34rpx;
						margin-right:6rpx;
					}
				}
			}
			.top{
				display:flex;
				width:100%;
				height:60rpx;
				align-items:center;
				justify-content:space-between;
				.text{
					font-size:36rpx;
					color:#1783dd;
				}
				.more{
					font-size:28rpx;
					line-height:60rpx;
					display:flex;
					align-items:center;
					color:#555555;
					.iconfont{
						margin-left:6rpx;
						line-height:62rpx;
						font-size:38rpx;
					}
				}
			}
		}
		.type-box{
			width:690rpx;
			margin:30rpx auto;
			height:180rpx;
			border-radius:10rpx;
			background:#ffffff;
			box-shadow:0 2rpx 10rpx #e0e0e0;
			display:flex;
			box-sizing:border-box;
			padding:0 40rpx;
			align-items:center;
			.main{
				width:100%;
				position:relative;
				.iconfont{
					font-size:56rpx;
					position:absolute;
					font-weight:600;
					right:0;
					color:#b3b3b3;
					top:50%;
					transform:translateY(-50%);
				}
				.name{
					display:block;
					width:100%;
					line-height:40rpx;
					font-size:32rpx;
					color:#444444;
				}
				.text{
					display:block;
					width:100%;
					line-height:40rpx;
					font-size:28rpx;
					color:#888888;
					margin-top:5rpx;
				}
			}
		}
		.search-top{
			width:100%;
			padding:0 30rpx;
			height:100rpx;
			display:flex;
			justify-content:space-between;
			align-items:center;
			box-sizing:border-box;
			border-bottom:1px solid #e6e6e6;
			background:#ffffff;
			.search-input{
				width:100%;
				height:60rpx;
				border-radius:60rpx;
				background:#f4f4f4;
				box-sizing:border-box;
				padding:0 30rpx;
				font-size:28rpx;
				color:#555555;
				line-height:70rpx;
				text-align:center;
			}
			.text{
				font-size:32rpx;
				color:#1783dd;
			}
		}
	}
</style>
